<script setup lang="ts">
import customSetting from "@/custom-setting.ts";
import {createVNode, h, onMounted, ref} from 'vue';
import {EditOutlined, ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {useRouter} from "vue-router";
import LayoutStore from "@/store/modules/setting.ts";
import UseUserStore from '@/store/modules/user.ts'
import CommonList from "@/view/components/header/common-list/index.vue"
import {message, Modal} from "ant-design-vue";
import $bus from '@/utils/emitter.ts'
import articleApi from '@/api/article.ts'
const layoutStore = LayoutStore();
const userStore = UseUserStore()
const $router = useRouter();
const isShowLoginOut = ref(false)
const historyList = ref([])
const collectList = ref([])
const getHistoryList = async () => {
  const result = await articleApi.getHistoryList()
  historyList.value = result.rows
  historyList.value.forEach((item:any) => {
    item.time = item.updateTime || item.createTime
  })
}
const getCollectList = async () => {
  const result = await articleApi.getCollectList()
  collectList.value = result.rows
  collectList.value.forEach((item:any) => {
    item.time = item.updateTime || item.createTime
  })
}
onMounted(async () => {
  // 获取
  await getHistoryList()
  await getCollectList()
})
// 搜索模型
const searchValue = ref('')
// 搜索事件
const onSearch = () => {
  $bus.emit('getArticlePageHandle', {
    title: searchValue.value,
    callback: (result:any) => {
      console.log('事件返回值:', result);
      // 在这里处理返回值
    }
  });
};
const confirmLogout = () => {
  Modal.confirm({
    title: '确认退出？',
    icon: createVNode(ExclamationCircleOutlined),
    okText: '确认',
    cancelText: '取消',
    onOk() {
      LoginOutHandle()
    },
  });
}
// 退出登陆
const LoginOutHandle = () => {
  console.log('out')
  try {
    userStore.logOut()
    message.success('退出成功')
    $router.push('/login')
  }
  catch {
    message.error('退出失败')
  }
}
</script>

<template>
  <div class="header">
<!--    logo标签-->
    <img :src="customSetting.logo"
         :style="layoutStore.isLayout1?'transform:translateX(-140px);':''"
         alt="" class="logo">

<!--    搜索按钮-->
    <a-input-search
        v-model:value="searchValue"
        placeholder="input search text"
        class="search"
        allowClear
        @change="onSearch"
        v-show="layoutStore.showSearch"
    >
      <template #prefix>
        <SearchOutlined
            @click="onSearch"
            style="color: rgb(161, 168, 179)"/>
      </template>
    </a-input-search>
    <div v-show="!layoutStore.showSearch" class="search"></div>

    <!--    文章按钮-->
    <a-button type="primary"
              :icon="h(EditOutlined)"
              @click="$router.push('/editor')"
              style="display: flex;align-items: center;margin-right: 1.9%">
      写文章
    </a-button>

<!--    收藏-->
    <a-popover
        placement="bottom">
      <template #content>
        <CommonList :content="collectList" v-if="Array.isArray(collectList) && collectList.length > 0"></CommonList>
        <a-empty  description="无" v-else/>
      </template>
      <template #title>
        <span>收藏</span>
      </template>
      <AppstoreAddOutlined class="icon" @click="$router.push('/collect')"/>
    </a-popover>
<!--    历史记录-->
    <a-popover placement="bottom">
      <template #content>
        <CommonList :content="historyList" v-if="Array.isArray(historyList) && historyList.length > 0"></CommonList>
        <a-empty description="无" v-else/>
      </template>
      <template #title>
        <span>历史记录</span>
      </template>
      <HistoryOutlined class="icon" @click="$router.push('/history')"/>
    </a-popover>
<!--    消息-->

    <a-popover placement="bottom">
      <template #content>
        <a-empty description="无"/>
      </template>
      <template #title>
        <span>消息</span>
      </template>
      <a-badge :count="5" class="message" v-show="false">
        <BellOutlined
            @click="$router.push('/message')"
            style="font-size: 20px"/>
      </a-badge>
    </a-popover>

<!--    头像-->
    <a-dropdown>
      <div class="ant-dropdown-link" @click.prevent>
        <img :src="userStore.userInfo.avatar ? userStore.userInfo.avatar : '/src/assets/avatar.jpg'" class="avatar" alt="">
        <CaretDownOutlined style="margin-left: 0.04%"/>
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a @click="$router.push('/personal')">个人中心</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">设置</a>
          </a-menu-item>
          <a-menu-item>
            <a @click="confirmLogout">退出登陆</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<style scoped lang="scss">
.header{
  display: flex;
  align-items: center;
  height: 100%;
  transition: all .3s;
  .logo{
    height: 100%;
    margin-right: 13.4%;
  }
  .search{
    width: 30.8%;
    margin-right: 13.75%;
  }
  .icon{
    font-size: 20px;
    margin-right: 2%;
    cursor: pointer;
  }
  .message{
    margin-right: 1.9%;
  }
  .avatar{
    height:34px;
    aspect-ratio: 1/1;
    border-radius: 50%;
  }
}
</style>
